<html> 
<head> 
 <title>HTML 文档结构 </title> 
</head> 
<body> 
    <div class="group">
        <!--输入框-->
        <input type="text" class="todovalue" name="todovalueName" id="todovalueId" placeholder="请输入TODO内容"
            onkeydown="valueChange(event)"/>
        <input type="button" value="添加1" onclick="handleClick()"></input>
        <button type="button" id="button3">添加2</button>
        <!--遍历数据-->
        <div id="todoList">
            <!-- <div class="item" id="item0" onmouseenter="test1(0)" onmouseleave="test2(0)">
                <input class="item-chk" type="checkbox"/>
                <div class="item-sp">吃饭0</div>
                <input id="item-del-0" class="item-del" type="button" value="删除" 
                onclick="handleDeClick(0)"></input>

            </div>
            <div class="item" id="item1" onmouseenter="test1(1)" onmouseleave="test2(1)">
                <input class="item-chk" type="checkbox"/>
                <div class="item-sp">吃饭1</div>
                <input id="item-del-1" class="item-del" type="button" value="删除" 
                onclick="handleDeClick(1)"></input>

            </div>
            <div class="item" id="item2"onmouseenter="test1(2)" onmouseleave="test2(2)">
                <input class="item-chk" type="checkbox"/>
                <div class="item-sp">吃饭2</div>
                <input id="item-del-2" class="item-del" type="button" value="删除" 
                onclick="handleDeClick(2)"></input>
            
            </div>
            <div class="item" id="item3">
                <input class="item-chk" type="checkbox"/>
                <div class="item-sp">吃饭3</div>
                <input id="item-del-3" class="item-del" type="button" value="删除" 
                onclick="handleDeClick(3)"></input>
            </div>   -->
        </div>
        <!--操作的footer-->
    </div>
</body> 
<script lang="javascript">
    var index = 0;
    function init(){
        document.getElementById("button3").onclick=handleClick;
    }
    function valueChange(e){
        console.log(e);
        if(event.keyCode == 13){
            handleClick();
        }
    }
    var index = 0
    function handleClick(){
        var temp = document.getElementsByName("todovalueName")[0].value;
        //alert("我被按了"+temp);
        //document.getElementById("todolist").innerHTML=temp;
        var div = document.createElement("div");
        //div.innerText=temp;
        var t = "<div class='item' id='item"+index+ "'>"
            + "  <input class='item-chk' type='checkbox' />"
            + "  <div  class='item-sp'>" + temp + "</div>"
            + "  <input id='item-del-"+index+"' class='item-del' type='button' value='删除' onclick='handleDelClick("+index+")'></input>"
            + " </div>"
            index++;
        document.getElementById("todoList").innerHTML += t

    }

    function test1(index){
        // console.log("test121111")
        // document.getElementById("todoList").children[index].style="background-color:red";
        // document.getElementById("item-del-"+index).style="opacity:1;";
    }

    function test2(index){
        // console.log("22222222222")
        // document.getElementById("todoList").children[index].style=""; 
        // document.getElementById("item-del-"+index).style="opacity:0;";
    }

    function handleDelClick(index) {
        var arr = document.getElementById("todoList");
        console.log(arr);
        document.getElementById("item" + index).remove();

        // document.getElementById("todoList").removeChild(arr.childNodes[index]);
    }

    init();
        
    //alter("test");

</script>
<style>
    body{
        display:flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;

    }
    .group{
        border:1px solid rgb(114, 6, 24);
        padding: 10px;
        border-radius: 4px;
    }
/* sass less */
    .item{
        /* display:none;
        opacity: 0;
        background-color: rgba(red,green,blue,alpha); */
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }
    .item:hover{
        background-color: rgb(241, 200, 139);
        transform: scale(1.2);
        
    }
    .item-sp{
        flex-grow:1;
    }
    .item-del{
        background-color: red;
        border: 0px;
        color: aliceblue;
        opacity: 0;
        border-radius: 4px;
    }

   .item:hover .item-del{
        opacity: 1;
   }

    .todovalue{
        border: 2px solid #b06969;
        padding: 6px;
        outline: none;
    }

    .todovalue:focus{
        box-shadow: 0px 0px 9px #32c256;
        border:2px solid #0add1f;
        outline: none;
    }

</style>
</html>